<template>
<el-card>
    <div style="width: 100%; text-align: left;">
      <el-button style="">模型名称：</el-button>
      <el-input v-model="searchModel.modelName" placeholder="请输入模型名称" clearable style="width: 300px;"></el-input>

      <el-button type="primary" plain @click="checkData" style="margin-left: 10px;">查询</el-button>
    </div>
    <div style="margin-top: 20px;">

      <el-table
          :data="modelListInfo"
          border
          stripe
          style="width: 100%;height: 600px;"
      >
        <el-table-column label="#" min-width="50">
          <template #default="scope">
            {{ (searchModel.currentPage-1)*searchModel.pageSize+scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="50" />
        <el-table-column prop="model_name" label="模型名称" min-width="100" />
<!--        <el-table-column prop="org_name" label="工区名称" min-width="100" />-->
        <el-table-column label="识别间隔" min-width="150">
          <template #default="scope">
            <el-select v-model="scope.row.identify_cycle" placeholder="识别类型">
              <el-option label="30s" value="30s" />
              <el-option label="1min" value="1min" />
              <el-option label="5min" value="5min" />
              <el-option label="10min" value="10min" />
              <el-option label="30min" value="30min" />
              <el-option label="1h" value="1h" />
              <el-option label="5h" value="5h" />
              <el-option label="24h" value="24h" />
            </el-select>
            <el-button type="primary" plain style="margin-left: 10px;" @click="editTime(scope.row)">确定</el-button>
          </template>

        </el-table-column>


        <el-table-column label="操作" min-width="136">
          <template #default="scope">
            <el-switch
                v-model="scope.row.state"
                class="mt-2"
                style="margin-left: 24px"
                inline-prompt
                @click="editState(scope.row)"
                :active-icon="Check"
                :inactive-icon="Close"
            />

          </template>
        </el-table-column>

      </el-table>

      <div class="demo-pagination-block" style="margin-top: 10px;">
        <el-pagination
            v-model:current-page="searchModel.currentPage"
            v-model:page-size="searchModel.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>


    <el-dialog v-model="state.updateDialogVisible" title="更新警告信息" width="40%" draggable center>
      <div style="text-align: center">
        <img :src="require('../images/'+state.imagesUrl+'.jpg')" width="520">
      </div>
      <div style="text-align: center">
        <el-button @click="state.updateDialogVisible = false">退出</el-button>
      </div>

    </el-dialog>

  </el-card>
</template>


<script lang="ts" setup>

import {ref, toRefs, reactive, onMounted} from "vue";
import {
  ModelListData,
  MSearchModelData
} from "@/entityapi/base";
import {ElMessage} from "element-plus";
import {editIdentifyCycle, editStates, getModelListAPI} from "@/api/modelapi";
//定义变量
const state=reactive({
  total:1,
  searchModel: {
    currentPage: 1,
    pageSize:10,
    modelName: '',
  } as MSearchModelData,
  modelListInfo:[] as ModelListData[],
  modelSignalInfo:{
    id: 0,
    model_name:"",
    identify_cycle:"",
    state: true,
  } as ModelListData,

});
const{
  modelListInfo,
  total,
  searchModel
}=toRefs(state)

//change pagesize
const handleSizeChange = (val: number) => {
  state.searchModel.pageSize=val
  getModelInfoList()
}
//当前页
const handleCurrentChange = (val: number) => {
  state.searchModel.currentPage=val
  getModelInfoList()
}

//初始化方法
onMounted(() => {
  state.total=1
  const aaa={
    id:1,
    model_name:"aaaa",
    identify_cycle:"1",
    state:true,
  }
  const bbb={
    id:2,
    model_name:"aaaa",
    identify_cycle:"1",
    state:false,
  }
  state.modelListInfo.push(aaa)
  state.modelListInfo.push(bbb)

  getModelInfoList()
});

function getModelInfoList(){
  getModelListAPI(state.searchModel).then((res:any) =>{
    console.log(res)
    for(let i=0;i<res.modelList.length;i++){
      if(res.modelList[i].state==1){
        res.modelList[i].state=true
      }else {
        res.modelList[i].state=false
      }
    }
    state.modelListInfo=res.modelList
    //state.modelListInfo=res.warningList
    state.total=res.total
  })
}
//修改状态
function editState(val:any){
  console.log(val)
  editStates(val.id,val.state).then((res:any)=>{
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '修改成功',
        type: 'success',
      })
      getModelInfoList()
    }else{
      ElMessage({
        showClose: true,
        message: '修改失败，请重试',
        type: 'error',
      })
    }
  })
}
//修改时间
function editTime(val:any){
  console.log(val)
  editIdentifyCycle(val.id,val.identify_cycle).then((res:any)=>{
    if(res.code==200){
      ElMessage({
        showClose: true,
        message: '修改成功',
        type: 'success',
      })
      getModelInfoList()
    }else{
      ElMessage({
        showClose: true,
        message: '修改失败，请重试',
        type: 'error',
      })
    }
  })
}
//查询
function checkData(){
  getModelInfoList()
}
</script>
